<script setup lang="ts">
import titleIcon1 from '@/assets/largescreen/qiangxiudui-mokuai.png';
import unfold from '@/assets/largescreen/mokuai-flag.png';
import Collapse from '@/assets/largescreen/mokuai-false.png';
import { useDialogStore } from '@/store/modules/useDialogStore';
import { useTopStore } from '@/store/modules/earlyWarning/useTopStore';
import { useCesiumPoints } from '@/hooks/useCesiumPoints';

const relayArray = ref([
  {
    id: 1,
    name: '监测力量',
    list: []
  }
]);

const computedRelayArray = computed(() => {
  relayArray.value[0].list = store.currentList;
  return relayArray.value;
});
const store = useTopStore();
const getTitleIcon = (id: number) => {
  switch (id) {
    case 0:
      return titleIcon1;
  }
};
const activeNames = ref(1);
const { flyTo } = useDialogStore();
//切换展开收起图标
const ToggleIcon = (id: number) => {
  if (activeNames.value === id) {
    return unfold;
  } else {
    return Collapse;
  }
};
</script>

<template>
  <el-collapse v-model="activeNames" accordion class="largeScreen-collapse">
    <el-collapse-item :name="item.id" v-for="(item, index) in computedRelayArray" :key="index">
      <template #title>
        <img :src="getTitleIcon(index)" alt="" />
        {{ item.name }}
      </template>
      <template #icon>
        <div class="icon-box">
          <img :src="ToggleIcon(item.id)" alt="" />
        </div>
      </template>
      <el-scrollbar min:height="20" max-height="300">
        <div class="main-box">
          <template v-if="item.list.length > 0">
            <div
              :title="itm.instPos"
              class="main-item-box"
              v-for="itm in item.list"
              @click="flyTo(itm, 2000, useCesiumPoints().getEntityById(itm.id))"
              :key="itm.id"
            >
              {{ itm.instPos }}
            </div>
          </template>
          <div v-else class="Empty-box">暂无数据</div>
        </div>
      </el-scrollbar>
    </el-collapse-item>
  </el-collapse>
</template>

<style scoped lang="scss">
.largeScreen-collapse {
  :deep(.el-collapse-item__header) {
    background: rgba(49, 126, 255, 0.5);
    color: white;
    margin-top: 0.375rem;
    font-size: 1.125rem;
    padding: 0 0.9375rem;
    box-sizing: border-box;
  }

  :deep(.el-collapse-item__arrow) {
    width: 40px;
  }

  .icon-box {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: right;
  }

  img {
    margin-right: 0.625rem;
    width: 1.125rem;
    height: 1.125rem;
  }
}

.main-box {
  width: 100%;
  background-color: rgba($color: #063145, $alpha: 0.5);
  padding: 0.9375rem;
  box-sizing: border-box;

  .main-item-box {
    width: 100%;
    min-height: 1.875rem;
    background: rgba(14, 89, 214, 0.34);
    margin-top: 0.625rem;
    line-height: 1.875rem;
    box-sizing: border-box;
    font-size: 1.125rem;
    cursor: pointer;
    color: white;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .main-item-box::before {
    content: '';
    display: inline-block;
    width: 0.25rem;
    min-height: 1.875rem;
    background-color: #43ff8b;
    vertical-align: top;
    margin-right: 20px;
  }
}

.Empty-box {
  font-weight: 700;
  font-size: 1.125rem;
  color: #0be4f1;
}

:deep(.el-input__wrapper) {
  box-shadow: inset 0 0 0.625rem 0 #045bbd;
  background-color: #003895;
  border: 0.0625rem solid #045bbd;
  height: 2.1875rem;
  line-height: 2.1875rem;
  color: #fff;
}

:deep(.el-input__inner) {
  color: white;
}
</style>
